/**
 * 	载入区域
 * ======================
 */
.loading{
	position: absolute;
	z-index: 10000;
	width:100%;
	height:100%;
	background:#fff;
	text-align: center;
	left:0
}
.loading .progress{
	margin: 5% auto 0;
	width: 60%;
	font-style: oblique
}
.loading p{
	margin-top:5%
}
.check-result,.check{
	display: none
}
.check,.load{
	font-size: 36px;
	line-height: 1.5em
}
.check-result{
	margin-top:30px
}
.check-result ul{
	list-style: decimal
}
.check-result ul li{
	text-align:left;
	margin:10px 0 10px 25%
}
.check-result ul strong{
	display: inline-block;
	width:100px
}
.check-result ul span{
	font-weight: bold
}
.check-result ul span.support{
	color: #51A351;
}
.check-result ul span.unsupport{
	color: #F89406;
}

.check-result ul small{
	margin-left: 30px;
	color: #888888
}
.check-result .select, .check-result .sorry{
	display: none
}
/*
 * header
 * ================================
 */
nav h1{
	padding-left:40px;
	background:url("../images/Painter.gif") no-repeat left center/auto 80%;
	display:inline-block;
	float: left;
	margin:0;
	font-size: 16px;
	line-height: 1.2em
}
.beta{
    background:#999999;
    border-radius: 5px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 1;
    margin: 13px 0 0 -14px;
    padding: 2px 5px;
}
#menu > li >ul >li{
	position:relative
}
#menu > li >ul >li i{
	position:absolute;
	right:15px;
	color:#888888;
	opacity:0.8
}
.icon-qq{
    background:url(../images/qq.png) no-repeat 0 0;
}
#nav-share-qq .qq:hover .icon-qq{
    background-image: url("../images/qq.png");
}
.icon-qzone,
.icon-weibo,
.icon-qweibo {
    background-image: url("../images/social.png");
    background-repeat: no-repeat;
    background-size:14px 132px;
}
.icon-qzone{
    background-position: 0 -17px;
}
.icon-weibo{
    background-position: 0 -68px;
}
.icon-qweibo{
    background-position: 0 0;
}

#nav-share-qzone .qzone:hover .icon-qzone,
#nav-share-qweibo .qweibo:hover .icon-qweibo,
#nav-share-weibo .weibo:hover .icon-weibo {
    background-image: url("../images/social.png");
}
/**
 * 	主要区域
 * =======================================
 */
/**
 * 	绘图区域
 * ---------------------------------------
 */
.canvas-wrap{
	position: relative;
	background:#ffffff;
	box-shadow: 0 0 3px #999
}
.canvas-paint{
	position: absolute;
	top:0;
	left:0;
	cursor: none
}
.hide{
    display:none;
}
.text-input{
    position: absolute;
    top: 0;
    left:0;
    padding: 3px 5px;
    border: 1px dashed blue;
}
#canvas-mouse[data-mouse="Pen"]{
	cursor: url("../images/tool-button-pen.gif") 0 24, crosshair;
}
#canvas-mouse[data-mouse="Eraser"]{
	cursor: url("../images/tool-button-eraser.gif") 9 24, crosshair;
}
#canvas-mouse[data-mouse="FloodFill"]{
	cursor: url("../images/tool-button-floodfill.gif") 9 24, crosshair;
}
#canvas-mouse[data-mouse="EyeDropper"]{
	cursor: url("../images/tool-button-eyedropper.gif") 2 24, crosshair;
}
#canvas-mouse[data-mouse="Text"]{
	cursor: text
}
/**
 * 	工具栏
 * ================================
 */
/**
 * 	工具栏
 * -----------------------------------
 */

.tool button{
	width:40px;
	height:80%;
	margin:5px 0 0 0.1%;
	border:0;
	border-radius: 5px;
	background-repeat:no-repeat;
	background-size:80% 80%;
	background-position: center center
}
.tool button:hover{
	background-color:#E5DEDE
}
.tool button.active{
	background-color:#888;
}
/**
 * 	图形类按钮
 */
.tool button[data-current-tool="Line"]{
	background-image:url("../images/tool-button-line.gif");
}
.tool button[data-current-tool="CurveClosed"]{
	background-image:url("../images/tool-button-curve-closed.gif");
}
.tool button[data-current-tool="Rect"]{
	background-image:url("../images/tool-button-rect.gif");
}
.tool button[data-current-tool="Circle"]{
	background-image:url("../images/tool-button-circle.gif");
}
.tool button[data-current-tool="Ellipes"]{
	background-image:url("../images/tool-button-ellipes.gif");
}
/**
 * 	轮廓类按钮
 */
.tool button[data-current-tool="Pen"]{
	background-image:url("../images/tool-button-pen.gif");
}
.tool button[data-current-tool="CurveClosedStroke"]{
	background-image:url("../images/tool-button-curve-closed-stroke.gif");
}
.tool button[data-current-tool="RectStroke"]{
	background-image:url("../images/tool-button-rect-stroke.gif");
}
.tool button[data-current-tool="CircleStroke"]{
	background-image:url("../images/tool-button-circle-stroke.gif");
}
.tool button[data-current-tool="EllipesStroke"]{
	background-image:url("../images/tool-button-ellipes-stroke.gif");
}

/**
 * 	文本工具
 */
.tool button[data-current-tool="Text"]{
	background-image:url("../images/tool-button-text.gif");
}
.tool button[data-current-tool="TextStroke"]{
	background-image:url("../images/tool-button-text-stroke.gif");
}


.tool .flood-fill{
	background-image:url("../images/tool-button-floodfill.gif");
}
.tool .eraser{
	background-image:url("../images/tool-button-eraser.gif");
}
.tool .select{
	background-image:url("../images/tool-button-select.gif");
}
.tool .eye-dropper{
	background-image:url("../images/tool-button-eyedropper.gif");
}

.tool .spectrum-color{
	margin:4px 0 0 0.1%;
}
/**
 * 	工具属性面版
 * -------------------------
 */
.tool-attribute-panel{
	display: inline-block
}
.tool-attribute-panel legend{
	font-size: 14px;
	margin-bottom:5px;
	font-weight: bold;
	line-height: 1.2em;
}
.tool-attribute-panel input{
	width:80px
}
.tool-attribute-panel input[type="radio"]{
	width:auto
}
.tool-attribute-panel .radios label{
	display: inline-block
}
.tool-attribute-panel .radios input{
	vertical-align: top;
	margin-right:5px
}
#tool-text-attribute-panel input[type="checkbox"]{
	width:auto;
	vertical-align: top;
	display:inline-block;
	float: none;
	margin-left: 5px;
}
#tool-text-attribute-panel .checkbox{
	display:inline-block;
	padding-left: 0
}
/**
 * 	工具面板
 * -----------------------------------
 */

.tool-panel button{
	width:40px;
	height:80%;
	margin:5px 0 0 0.2%;
	border:0;
	border-radius:5px;
	background-repeat:no-repeat;
	background-size:80% 80%;
	background-position: center center
}
.tool-panel .wrap{
	display:none;
	height: 100%
}
.tool-panel .wrap button:hover{
	background-color:#E5DEDE
}
/**
 * 	图形工具面板
 * ------------------------
 */
.tool-panel .shape{
	display:block
}
.tool-panel .shape .line{
	background-image:url("../images/tool-button-line.gif");
}
.tool-panel .shape .curve-closed{
	background-image:url("../images/tool-button-curve-closed.gif");
}
.tool-panel .shape .rect{
	background-image:url("../images/tool-button-rect.gif");
}
.tool-panel .shape .circle{
	background-image:url("../images/tool-button-circle.gif");
}
.tool-panel .shape .ellipes{
	background-image:url("../images/tool-button-ellipes.gif");
}
/**
 * 	画笔工具面板
 * --------------------------------
 */
.tool-panel .stroke .pen{
	background-image:url("../images/tool-button-pen.gif");
}
.tool-panel .stroke .curve-closed-stroke{
	background-image:url("../images/tool-button-curve-closed-stroke.gif");
}
.tool-panel .stroke .rect-stroke{
	background-image:url("../images/tool-button-rect-stroke.gif");
}
.tool-panel .stroke .circle-stroke{
	background-image:url("../images/tool-button-circle-stroke.gif");
}
.tool-panel .stroke .ellipes-stroke{
	background-image:url("../images/tool-button-ellipes-stroke.gif");
}
/**
 * 	文字工具面板
 * --------------------------------
 */
.tool-panel .text .text{
	background-image:url("../images/tool-button-text.gif");
}
.tool-panel .text .text-stroke{
	background-image:url("../images/tool-button-text-stroke.gif");
}
#tool-text-attribute-panel .font{
	font-size: 18px;
}
#tool-text-attribute-panel .font option{
	font-size: 24px;
	font-weight: bolder
}
#tool-text-attribute-panel .font .serif{
	font-family: serif
}
#tool-text-attribute-panel .font .sans-serif{
	font-family:sans-serif
}
#tool-text-attribute-panel .font .arial{
	font-family:"Arial";
}
#tool-text-attribute-panel .font .arial-black{
	font-family:"Arial Black"
}
#tool-text-attribute-panel .font .terminal{
	font-family:Terminal
}
#tool-text-attribute-panel .font .verdana{
	font-family:Verdana
}
#tool-text-attribute-panel .font .fangzhengshuti{
	font-family:"方正舒体"
}
#tool-text-attribute-panel .font .fangzhengyaoti{
	font-family:"方正姚体"
}
#tool-text-attribute-panel .font .heiti{
	font-family:"黑体"
}
#tool-text-attribute-panel .font .huawencaiyun{
	font-family:"华文彩云"
}
#tool-text-attribute-panel .font .huawenhupo{
	font-family:"华文琥珀"
}
#tool-text-attribute-panel .font .huawenxinwei{
	font-family:"华文新魏"
}
#tool-text-attribute-panel .font .huawenzhongsong{
	font-family:"华文中宋"
}
#tool-text-attribute-panel .font .kaiti{
	font-family:"楷体_GB2312"
}
#tool-text-attribute-panel .font .lishu{
	font-family:"隶书"
}
#tool-text-attribute-panel .font .songti{
	font-family:"宋体"
}
#tool-text-attribute-panel .font .weiruanyahei{
	font-family:"微软黑体"
}
#tool-text-attribute-panel .font .youyuan{
	font-family:"幼圆"
}
/**
 * 	文字工具属性面板
 */
#tool-text-attribute-panel .text{
	width:100%
}
/**
 * 	footer
 * ==============================
 */
footer p{
	text-align:center
}

.weibo{
    padding: 0 5px
}
.alipay img {
    width: auto;
    height: 1.5em
}
